<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-21 10:27:23
 * @LastEditTime: 2024-06-21 14:05:34
-->
<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue';
import { UserFilled, Lock, Unlock, SuccessFilled, Refresh, Bottom, User } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import { useSwitch, useCountDown } from '@/hooks/index';
import { $t } from '@/plugins/i18n/index';
import { doCheckLogin } from '@/api/service/login';
defineProps({
    mode: { type: Object as () => any, required: true }
});
const { flag, close, open } = useSwitch();
const { countdown, countDown } = useCountDown();

export type IEditPassword = {
    username: string;
    password: string;
    confirm?: string;
};

const checkRef = ref<FormInstance>();
const editRef = ref<FormInstance>();
//确认密码校验
function checkPassword(_rule: any, value: any, callback: any) {
    if (editData.value.password !== value) {
        callback(new Error($t(`placeholder.login.rules.twice`)));
        return;
    }
    callback();
}
const { activeStep, rules, loginData, editData } = toRefs(
    reactive({
        activeStep: 0 as number,
        loginData: {
            username: '',
            password: ''
        } as IEditPassword,
        editData: {
            username: '',
            password: '',
            confirm: ''
        } as IEditPassword,
        rules: {
            password: [
                {
                    required: true,
                    message: $t(`placeholder.login.password`, {
                        prefix: $t(`placeholder.enter`)
                    }),
                    trigger: 'blur'
                }
            ],
            confirm: [{ required: true, validator: checkPassword, trigger: 'blur' }]
        } as FormRules
    })
);
const openDialog = (mode: any) => {
    loginData.value.username = mode.username;
    open();
};

const nextStep = async (step: number) => {
    if (step == 0) {
        if (!checkRef.value) return;
        checkRef.value.validate(async valid => {
            if (valid) {
                let result: any = await doCheckLogin(loginData.value.username, loginData.value.password);
                if (result.data) {
                    editData.value.username = loginData.value.username;
                    addStep(step);
                }
            }
        });
    } else if (step == 1) {
        if (!editRef.value) return;
        editRef.value.validate(async valid => {
            if (valid) {
                let result: any = await doCheckLogin(loginData.value.username, loginData.value.password);
                if (result.data) {
                    addStep(step);
                    countDown(60);
                }
            }
        });
    } else {
        console.log('异常');
    }

    function addStep(step: number) {
        activeStep.value = step + 1;
    }
};

const handleClose = () => {
    if (activeStep.value !== 2) {
        close();
    }
    activeStep.value = 0;
    checkRef.value?.resetFields();
    editRef.value?.resetFields();
};
</script>
<template>
    <el-button link size="small" :icon="Unlock" @click="openDialog(mode)">{{ $t(`button.editPwd`) }}</el-button>

    <el-dialog v-model="flag" destroy-on-close draggable :title="$t(`button.editPwd`)" width="600" append-to-body :before-close="handleClose" custom-class="dialog-xs">
        <el-steps :active="activeStep" align-center simple>
            <el-step :title="$t(`title.editPwd.checkUser`)" :icon="UserFilled" />
            <el-step :title="$t(`title.editPwd.resetPwd`)" :icon="Lock" />
            <el-step :title="$t(`title.editPwd.result`)" :icon="SuccessFilled" />
        </el-steps>
        <div class="dialog_content">
            <!-- 验证用户 -->
            <el-form v-show="activeStep == 0" ref="checkRef" :model="loginData" label-width="auto" label-position="right" :rules="rules">
                <el-form-item prop="username" :label="$t(`placeholder.login.userName`)">
                    <el-input :prefix-icon="User" v-model="loginData.username" disabled />
                </el-form-item>
                <el-form-item prop="password" :label="$t(`placeholder.login.password`)">
                    <el-input :prefix-icon="Lock" v-model="loginData.password" type="password" show-password :placeholder="$t(`placeholder.login.password`)" />
                </el-form-item>
            </el-form>
            <!-- 重置密码 -->
            <el-form v-show="activeStep == 1" ref="editRef" :model="editData" label-width="auto" label-position="right" :rules="rules">
                <el-form-item prop="username" :label="$t(`placeholder.login.userName`)">
                    <el-input :prefix-icon="User" v-model="editData.username" disabled />
                </el-form-item>
                <el-form-item prop="password" :label="$t(`placeholder.login.password`)">
                    <el-input :prefix-icon="Lock" v-model="editData.password" type="password" :placeholder="$t(`placeholder.login.password`)" />
                </el-form-item>
                <el-form-item prop="confirm" :label="$t(`placeholder.login.confirmPwd`)">
                    <el-input :prefix-icon="Lock" v-model="editData.confirm" type="password" :placeholder="$t(`placeholder.login.confirmPwd`)" />
                </el-form-item>
            </el-form>
            <!-- 返回结果 -->
            <el-result v-show="activeStep == 2" icon="success" :title="$t(`title.editPwd.success`)" :sub-title="countdown + $t(`title.editPwd.timerAgain`)">
                <template #extra>
                    <el-button :icon="Refresh" type="primary" @click="countDown(60)">{{ $t(`button.hand`) }}</el-button>
                </template>
            </el-result>
        </div>

        <template #footer>
            <el-button type="primary" :icon="Bottom" @click="nextStep(activeStep)" v-if="activeStep < 2">{{ $t(`button.next`) }}</el-button>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.dialog_content {
    padding: 20px;
}
</style>
